"use client";
import {LockOutlined, UserOutlined, PictureOutlined} from "@ant-design/icons";
import {LoginForm, ProFormText} from "@ant-design/pro-components";
import React, {useEffect, useState} from "react";
import Image from "next/image";
import Link from "next/link";
import {getCodeUsingGet, userLoginUsingPost} from "@/api/userController";
import {message} from "antd";
import {useDispatch} from "react-redux";
import {AppDispatch} from "@/stores";
import {setLoginUser} from "@/stores/loginUser";
import {ProForm} from "@ant-design/pro-form/lib";
import {useRouter} from "next/navigation";
import './index.css';

/**
 * 用户登录页面
 * @constructor
 */
const UserLoginPage: React.FC = () => {
    const [form] = ProForm.useForm();
    const dispatch = useDispatch<AppDispatch>();
    const router = useRouter();
    const [code, setCode] = useState<string>("");

    useEffect(() => {
        fetchCode();
    }, []);

    const fetchCode = async () => {
        try {
            const res = await getCodeUsingGet();
            setCode(`data:image/png;base64,${res.data}`);
        } catch (e) {
            message.error("获取验证码失败，" + e.message);
        }
    };

    /**
     * 提交
     */
    const doSubmit = async (values: API.UserLoginRequest) => {
        try {
            const res = await userLoginUsingPost(values);
            if (res.data) {
                message.success("登录成功");
                // 保存用户登录状态
                dispatch(setLoginUser(res.data));
                router.replace("/");
                form.resetFields();
                fetchCode();
            }
        } catch (e) {
            message.error("登录失败，" + e.message);
            fetchCode();
        }
    };

    return (
        <div id="userLoginPage">
            <LoginForm
                form={form}
                logo={
                    <Image src="/assets/logo.png" alt="简易面试刷题平台" height={44} width={44}/>
                }
                title="简易面试刷题平台 - 用户登录"
                subTitle="面试刷题网站"
                onFinish={doSubmit}
            >
                <ProFormText
                    name="userAccount"
                    fieldProps={{
                        size: "large",
                        prefix: <UserOutlined/>,
                    }}
                    placeholder={"请输入用户账号"}
                    rules={[
                        {
                            required: true,
                            message: "请输入用户账号!",
                        },
                    ]}
                />
                <ProFormText.Password
                    name="userPassword"
                    fieldProps={{
                        size: "large",
                        prefix: <LockOutlined/>,
                    }}
                    placeholder={"请输入密码"}
                    rules={[
                        {
                            required: true,
                            message: "请输入密码！",
                        },
                    ]}
                />
                {/* 新增验证码部分 */}
                <div
                    style={{
                        display: "flex",
                        alignItems: "center",
                        marginBottom: 10,
                        gap: 10,
                        height: 40
                    }}
                >
                    <Image
                        src={code}
                        alt="验证码"
                        width={120}
                        height={40}
                        onClick={fetchCode}
                        style={{
                            cursor: "pointer",
                            flexShrink: 0, // 防止图片被压缩
                            marginTop: -23
                        }}
                    />
                    <div style={{flex: 1}}> {/* 新增容器 */}
                        <ProFormText
                            name="code"
                            fieldProps={{
                                size: "large",
                                style: {width: '100%'},
                            }}
                            placeholder={"请输入验证码"}
                            rules={[
                                {required: true, message: "请输入验证码！"}
                            ]}
                        />
                    </div>
                </div>
                <div
                    style={{
                        marginBlockEnd: 24,
                        textAlign: "end",
                    }}
                >
                    还没有账号？
                    <Link href={"/user/register"}>去注册</Link>
                </div>
            </LoginForm>
        </div>
    );
};

export default UserLoginPage;
